<template>
  <div>
    <Dialog :title="title" :visible="visible" :reveal="false" :loading="loading" class="two-columns" @close="handleClose">
      <UserInfo :info-id="recordForm.customerId" />
      <el-form ref="ruleForm" :model="recordForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="咨询编号：">{{ recordForm.advisoryCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询分类：">{{ recordForm.consultTypeName?recordForm.consultTypeName:'无' }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="咨询师：">{{ recordForm.consultantName?recordForm.consultantName:'无' }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询时间：">{{ recordForm.advisoryTime }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="咨询情况：">
          <div v-html="templateData.advisoryInfo" />
          <!-- <editor-content class="editor__content box box-y" :editor="editor" /> -->
        </el-form-item>
        <el-form-item label="咨询结果：">{{ recordForm.result }}</el-form-item>
        <el-form-item v-if="recordForm.result !=='上门'" label="不上门原因：" x>{{ recordForm.loseReason }}</el-form-item>
      </el-form>
      <el-row type="flex" justify="center" class="butl">
        <el-button class="submitButton" @click="previousBtn()">上一条</el-button>
        <el-button class="submitButtons" @click="nextBtn()">下一条</el-button>
      </el-row>
      <div class="all-margin-bottom" />
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog/index";
import UserInfo from "@/components/UserInformation";
// import { Editor, EditorContent } from "tiptap";
export default {
  components: {
    Dialog,
    UserInfo,
    // EditorContent,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      recordForm: {},
      template: `<p>
            顾客诉求：
          </p>
          <P>
            顾客情况：
          </P>
          <P>
            诊断结果：
          </P>`,
      editor: null,
      templateData: {},
      index: null,
      dataGroup: [],
      loading: false,
    };
  },
  mounted() {
    this.getTemplate();
  },
  methods: {
    async recordBtn(row, dataList) {
      if (dataList.length > 0) {
        dataList.filter((v, i) => {
          if (v.id === row.id) {
            this.index = i;
            return v;
          }
        });
        // console.log(dataList, row.id, this.index, 'ss');
        this.dataGroup = dataList;
      }
      const res = await this.$api['doctor/consulting/advisoryList']({ id: row.id });
      if (res.code !== 200) return this.$message.error("查看记录失败");
      this.recordForm = res.data;
      // if (this.editor) {
      //   this.editor.destroy();
      // }
      this.getTemplate();
    },
    getTemplate() {
      this.$api["networkpower/consultationsetup/list"]({ 'templateType': '网电咨询模板' }).then((res) => {
        if (res.code !== 200) return this.$message.error("获取咨询模板失败");
        this.templateData = res.data;
        Object.assign(this.templateData, this.recordForm);
        console.log(this.templateData);
        // this.editor = new Editor({
        //   content: this.templateData.advisoryInfo,
        //   onUpdate: ({ state, getHTML, getJSON, transaction }) => {
        //     this.template = getHTML();
        //   },
        // });
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    previousBtn() {
      if (this.index > 0) {
        this.index -= 1;
        this.recordForm = this.dataGroup[this.index];
        if (this.editor) {
          this.editor.destroy();
        }
        this.getTemplate();
      } else {
        this.$message.info('已经是第一条');
      }
    },
    nextBtn() {
      if (this.index < this.dataGroup.length - 1) {
        this.index += 1;
        this.recordForm = this.dataGroup[this.index];
        if (this.editor) {
          this.editor.destroy();
        }
        this.getTemplate();
      } else {
        this.$message.info('已经是最后一条');
      }
    },
  },
};
</script>
<style lang="scss" scoped>

.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  border: none;
  color:#fff;
}
.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC !important;
  border-radius: 4px !important;
  color:#fff !important;
}
.submitButton:hover{
  background: #4791d1 !important;
}
.submitButtons{
  background: #EFF3FB !important;
  color: #0278DC !important;
}
.submitButtons:hover{
  background: #46a6ff !important;
  color: #fff !important;
}
.butl{
  display: flex;
  justify-content: center;
  // .submitButton{
    // margin-right: 45px;
  // }
  // .submitButtons{
    // margin-left: 45px;
  // }
}
.userinfo{
  margin-left: 0;
}
/deep/.el-form-item__content{
    font-size: 12px;
  }
</style>
